<template>
  <div>
    <div class="blog-container">
      <div class="blog-title" v-text="blog.blogTitle" />
      <div class="blog-info">
        <div class="blog-time">{{ blog.createdTime }}</div>
        <div class="blog-meta">
          <a-icon type="eye" /><span style="margin-right: 3px" v-text="blog.blogRead" />
          <a-icon type="like" /><span style="margin-right: 3px" v-text="blog.blogGoods" />
          <a-icon type="heart" /><span style="margin-right: 3px" v-text="blog.blogCollection" />
          <a-icon type="message" /><span style="margin-right: 3px" v-text="blog.blogComment" />
        </div>
      </div>
      <div blog-content v-html="blog.blogContent" />
      <div class="blog-action">
        <div>
          <a-tooltip :title="hasGoods ? '已点赞' : '点赞'">
            <a-icon type="like" :theme="hasGoods ? 'filled' : 'outlined'" @click="handlerGood" />
          </a-tooltip>
        </div>
        <div>
          <a-tooltip :title="hasCollect ? '已收藏' : '收藏'">
            <a-icon type="heart" :theme="hasCollect ? 'filled' : 'outlined'" @click="handlerCollect" />
          </a-tooltip>
        </div>
      </div>
    </div>
    <div class="comment-container">
      <div class="comment-publish">
        <a-textarea
          v-model="comment"
          placeholder="畅所欲言吧~"
          :auto-size="{ minRows: 3, maxRows: 3 }"
        />
        <div class="btn-publish">
          <a-button type="primary" @click="submitComment">提交评论</a-button>
          <div v-show="showRemind" class="comment-remind">
            还能输入 {{ commentRemainCount }} 个字符
          </div>
        </div>
      </div>
      <div class="comment-list">
        <div v-for="item in commentList" :key="item.id" class="comment-card">
          <div class="comment-avatar">
            <img v-if="item.user.header" :src="item.user.header" class="avatar">
            <img v-else src="@/assets/def-avatar.jpg" class="avatar">
          </div>
          <div class="comment-info">
            <div class="comment-info-first-line">
              <div class="comment-info-first-line-left">
                <div class="comment-author" v-text="item.user.nickname" />
                <div class="comment-time" v-text="item.createdTime" />
              </div>
              <div class="comment-info-first-line-right">
                <a-tooltip :title="item.commentFlag ? '已点赞' : '点赞'">
                  <a-icon type="like" :theme="item.commentFlag ? 'filled' : 'outlined'" @click="handlerCommentGood(item)" />
                </a-tooltip>
                <span style="margin-left: 3px" v-text="item.commentGood" />
              </div>
            </div>
            <div class="comment-content" v-text="item.commentContent" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import blogApi from '@/api/blog'
import commentApi from '@/api/comment'
export default {
  data() {
    return {
      comment: '',
      commentRemainCount: 100,
      showRemind: false,
      blog: {},
      commentList: [],
      hasGoods: false,
      hasCollect: false
    }
  },
  computed: {
    user() {
      return this.$store.getters.getUser
    }
  },
  watch: {
    'comment': function(newVal, oldVal) {
      if (newVal.length > 0) {
        this.showRemind = true
        this.commentRemainCount = 100 - newVal.length
        if (newVal.length > 100) {
          this.comment = this.comment.substring(0, 100)
        }
      } else {
        this.showRemind = false
      }
    }
  },
  created() {
    const id = this.$route.params.id
    this.getById(id) // 获取文章
    this.getCommentsById(id) // 获取评论列表
    if (this.user.username) { // 已登录的情况下
      this.checkHasGoods(id) // 查看是否已点赞
      this.checkHasCollect(id) // 查看是否已收藏
    }
  },
  methods: {
    // 评论点赞
    handlerCommentGood(comment) {
      if (comment.commentFlag) {
        // 已点赞
        return
      }
      const id = this.$route.params.id
      const commentGoodsObj = {
        commentId: comment.id,
        blogId: id
      }
      commentApi.good(commentGoodsObj).then(resp => {
        commentApi.getGood(comment.id).then(resp => {
          if (resp.data) {
            comment.commentGood += 1
            comment.commentFlag = resp.data
          }
        })
      })
    },
    handlerGood() {
      if (this.hasGoods) {
        return
      }
      const id = this.$route.params.id
      const goodsObj = {
        blogId: id
      }
      blogApi.good(goodsObj).then(resp => {
        this.blog.blogGoods += 1
        this.checkHasGoods(id)
      })
    },
    handlerCollect() {
      if (this.hasCollect) {
        return
      }
      const id = this.$route.params.id
      const collectObj = {
        blogId: id
      }
      blogApi.collect(collectObj).then(resp => {
        this.blog.blogCollection += 1
        this.checkHasCollect(id)
      })
    },
    checkHasGoods(id) {
      blogApi.getGood(id).then(resp => {
        this.hasGoods = resp.data
      })
    },
    checkHasCollect(id) {
      blogApi.hasCollect(id).then(resp => {
        this.hasCollect = resp.data
      })
    },
    getById(id) {
      // 在Vue实例创建完毕执行
      blogApi.read(id).then(resp => {
        this.blog = resp.data
      })
    },
    getCommentsById(id) {
      commentApi.getListByBlogId(id).then(resp => {
        this.commentList = resp.data
      })
    },
    submitComment() {
      if (this.comment !== '') {
        const id = this.$route.params.id
        const commentObj = {
          commentBlog: id,
          commentContent: this.comment
        }
        commentApi.save(commentObj).then(resp => {
          this.getCommentsById(id)
          this.comment = ''
          this.blog.blogComment += 1
        })
      }
    }
  }
}
</script>
<style scoped>
.blog-container {
  background-color: #fff;
  padding: 25px 20px;
}
.blog-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}
.blog-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
}
.comment-container {
  background-color: #fff;
  padding: 25px 20px;
  margin-top: 15px;
}
.comment-publish {
  margin-bottom: 8px;
}
.btn-publish {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  margin-top: 5px;
}
.comment-remind {
  margin-right: 10px;
  font-size: 12px;
  color: #999;
}
.comment-avatar {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.avatar {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  border: 3px solid #e5e5e5;
  margin: 0 8px 0 5px;
}
.comment-card {
  height: 110px;
  border: 1px solid #e5e5e5;
  display: flex;
  flex-direction: row;
  padding-top: 0px;
}
.comment-info {
  width: 100%;
}
.comment-author {
  font-weight: bold;
  margin-right: 5px;
}
.comment-time {
  font-size: 12px;
  color: #999898;
}
.comment-info-first-line {
  margin-top: 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.comment-info-first-line-left {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.comment-info-first-line-right {
  margin-right: 15px;
}
.comment-content {
  margin-right: 3px;
  max-height: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-action {
  width: 100px;
  margin: 50px auto 5px auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
}
</style>
